<template>
    <div class="madp-product-manage">
        <basic-container>
            <div class="container">
                <div class="left-container">
                    <el-menu :default-active="activeIndex" mode="vertical" :collapse="true" @select="handleSelect">
                        <template v-for="item in menuList">
                            <el-submenu v-if="item.childrens && item.childrens.length > 0" :index="String(item.id)" :key="item.id">
                                <template slot="title">
                                    {{ item.name }}
                                </template>
                                <template v-for="item1 in item.childrens">
                                    <!-- TODO:暂时大额存单菜单屏蔽 -->
                                    <el-menu-item v-if="item1.id != 34" :index="String(item1.id)" :key="item1.id">{{ item1.name }}</el-menu-item>
                                </template>
                            </el-submenu>
                            <el-menu-item v-else :index="String(item.id)" :key="item.id">{{ item.name }}</el-menu-item>
                        </template>
                    </el-menu>
                </div>
                <div class="right-container">
                    <!-- 精选产品 理财 基金 -->
                    <div v-if="activeIndex == 11 || activeIndex == 12">
                        <div class="header">
                            <el-form :inline="true">
                                <el-form-item label="产品编码:">
                                    <el-input v-model.trim="productCode" placeholder="请输入产品代码"></el-input>
                                </el-form-item>
                                <el-form-item label="产品名称:">
                                    <el-input v-model.trim="productName" placeholder="请输入产品名称"></el-input>
                                </el-form-item>
                            </el-form>
                            <el-button @click="isUpdate = true" type="primary">搜索</el-button>
                        </div>
                        <product-component :state="1" :menuId="activeIndex" :isUpdate.sync="isUpdate" :productCode="productCode" :productName="productName"></product-component>
                        <product-component
                            style="margin-top: 30px"
                            :state="0"
                            :menuId="activeIndex"
                            :isUpdate.sync="isUpdate"
                            :productCode="productCode"
                            :productName="productName"
                            :isApprove="true"
                            @isUpdate="updateList"
                        ></product-component>
                    </div>
                    <!-- 精选贷款 -->
                    <div v-if="activeIndex == 4">
                        <div class="header">
                            <el-form :inline="true">
                                <el-form-item label="产品编码:">
                                    <el-input v-model.trim="loansCode" placeholder="请输入产品编码"></el-input>
                                </el-form-item>
                                <el-form-item label="产品名称:">
                                    <el-input v-model.trim="loansName" placeholder="请输入产品名称"></el-input>
                                </el-form-item>
                            </el-form>
                            <el-button @click="isUpdate = true" type="primary">搜索</el-button>
                        </div>
                        <loans-component :state="1" :showAddLoans.sync="showAddLoans" :menuId="activeIndex" :isUpdate.sync="isUpdate" :loansCode="loansCode" :loansName="loansName"></loans-component>
                        <loans-component
                            style="margin-top: 30px"
                            :state="0"
                            :menuId="activeIndex"
                            :isUpdate.sync="isUpdate"
                            :loansCode="loansCode"
                            :loansName="loansName"
                            :isApprove="true"
                            @isUpdate="updateList"
                        ></loans-component>
                    </div>
                    <!-- 精选信用卡 -->
                    <div v-if="activeIndex == 5">
                        <credit-card-component :state="1" :menuId="activeIndex" :isUpdate.sync="isUpdate"></credit-card-component>
                        <credit-card-component style="margin-top: 30px" :state="0" :menuId="activeIndex" :isUpdate.sync="isUpdate" :isApprove="true" @isUpdate="updateList"></credit-card-component>
                    </div>
                </div>
            </div>
        </basic-container>
    </div>
</template>
<script>
import approveApi from '@/api/store/approve.js';
import productComponent from './components/product.vue';
import loansComponent from './components/loans.vue';
import creditCardComponent from './components/credit-card.vue';
import { mapGetters } from 'vuex';
export default {
    components: { productComponent, loansComponent, creditCardComponent },
    data() {
        return {
            isUpdate: false,
            activeIndex: '',
            menuList: [],
            productCode: '',
            productName: '',
            loansName: '',
            loansCode: '',
            showAddLoans: false
        };
    },
    computed: {
        ...mapGetters({
            permissions: 'permissions'
        })
    },
    created() {
        this.getMenuList();
    },
    methods: {
        handleSelect(id) {
            this.activeIndex = id;
            this.productCode = '';
            this.productName = '';
            this.loansName = '';
            this.loansCode = '';
        },
        getMenuList() {
            approveApi.productGroupTree().then((res) => {
                this.menuList = res.data.data;
                this.activeIndex = '11';
            });
        },
        updateList(val) {
            this.isUpdate = val;
        }
    }
};
</script>
<style scoped lang="scss">
.container {
    width: 100%;
    display: flex;
    .left-container {
        width: 120px;
        min-width: fit-content;
        border-right: 1px solid #f1c4c4;
    }
    .right-container {
        flex: 1;
        padding-left: 20px;
        .header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            /deep/.el-form {
                margin-left: 10px;
                align-items: center;
                display: flex;
                .el-form-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 0;
                }
            }
        }
    }
}
.el-menu--collapse {
    width: 100%;
}
.el-menu {
    background: #fff !important;
}
</style>
